/**
 * 工具函数 公共函数库
 */


/* 公共提示框 */
function tipsFn(msg, status) {

    // 创造一个节点---消息提示框
    let div = document.createElement('div');
    div.className = 'tooltip';
    div.innerHTML = `
        <h3 class="${status==0?'rightTip':'wrongTip'}">${status==0?'√':'x'}</h3>
        <p>${msg}</p>
    `
        // 将div追加到body里
    document.body.append(div);
    //点击任意地方,删除提示框消息
    window.onclick = function() {
        div.remove();
    }
    setTimeout(function() {
        div.remove();
    }, 1000)

}


/* 公共尾部 */
/*
info 
    index  激活 首页
    exercise  激活 运动
    circle 激活 圈子
    my     激活 我的
*/
function footerFn(info = 'parameter') {

    // 利用函数参数激活样式
    let footer = document.createElement('footer');
    footer.innerHTML = `
    <a href="./index.html" class="${info=== 'index'?'active':''}">
        <em class="iconfont iconhome"></em>
        <span>首页</span>
    </a>
    <a href="./running.html" class="${info=== 'exercise'?'active':''}">
        <em class="iconfont iconsports"></em>
        <span>运动</span>
    </a>
    <a href="./attention.html" class="${info=== 'circle'?'active':''}">
        <em class="iconfont iconcircle"></em>
        <span>圈子</span>
    </a>
    <a href="./my.html" class="${info=== 'my'?'active':''}">
        <em class="iconfont icon-wode1"></em>
        <span>我的</span>
    </a>        
    `
    document.body.append(footer);

}

//运动页面的公共头部

function exerHeader(info) {
    let div = document.createElement('div');
    div.className = 'exercise';
    div.innerHTML = `
        <a href="./running.html" class="${info=='running'?'active':''}">跑步</a>
        <a href="./riding.html" class="${info == 'riding' ? 'active' : ''}">骑行</a>
        <a href="./training.html" class="${info == 'training' ? 'active' : ''}">课程训练</a>
    `
        //追加到main标签之前
    document.body.insertBefore(div, document.querySelector('main'));
}

//圈子页面公共头部
function circleHeader(info = 'attention') {
    let div = document.createElement('div');
    div.className = 'circle';
    div.innerHTML = `
        <div class="circle-link">
            <a href="./attention.html" class="${info=='attention'?'active':''}">关注</a>
            <a href="./nearby.html" class="${info=='nearby'?'active':''}">附近</a>
            <a href="./collection.html" class="${info=='collection'?'active':''}">收藏</a>
            <a href="./dynamic.html" class="${info=='dynamic'?'active':''}">个人动态</a>
        </div>
        <div class="jump-add" id="jumpAdd"><a href="./addition.html">添加＋</a></div>
    `
    document.body.insertBefore(div, document.querySelector('main'));
}


//补零函数
function fillZero(n) {
    return n > 9 ? n : '0' + n
}




//选择提示框
function selectTipFn(tipsText) {
    let div = document.createElement('div');
    div.className = 'selectMask';
    div.innerHTML = `
    <div class="selectTip">
        <p>${tipsText}</p>
        <button id="cancel">取消</button>
        <button id="confirm">确认</button>
    </div>
    `
    document.body.append(div);

}

//获取年月日
function getFMD(sep) {
    let data = new Date();
    let year = data.getFullYear();
    let month = data.getMonth() + 1;
    let day = data.getDate();
    return [year, fillZero(month), fillZero(day)].join(sep);
}


//把方法挂载在window上 {tips:tips} 全局变量
window.tipsFn = tipsFn;
window.footerFn = footerFn;
window.$utils = {
    tipsFn: tipsFn,
    fillZero: fillZero,
    footerFn: footerFn,
    exerHeader: exerHeader,
    selectTipFn: selectTipFn,
    getFMD: getFMD,
    circleHeader: circleHeader
}